<template>
	<view class="content">
		<u-sticky bgColor="#fff">
			<u-tabs :list="tabList" :scrollable="false"></u-tabs>
		</u-sticky>
		<view class="order-list" v-for="(item,index) in orderList" :key="index" @click="goDetail(item)">
			<view class="order-time">
				<view>2024-03-11</view>
				<view style="margin-left: auto;color: #0277DE;">待付款</view>
			</view>
			<view class="mine-avatar">
				<image :src="src" mode="aspectFill"
					style="width: 160rpx;height: 160rpx;border-radius: 8rpx;flex-shrink: 0;">
				</image>
				<view class="avatar-text">
					<view class="text-ovew" style="font-weight: 500;font-size: 27rpx;color: #000000;">
						河南省郑州市河南省郑州市河南省郑州市河南省郑州市</view>
					<view class="flex-row" style="margin-top: 23rpx;">
						<view>x 1</view>
						<view style="font-weight: 500;font-size: 31rpx;color: #000000;margin-left: auto;">￥50.00</view>
					</view>
				</view>
			</view>
			<view class="order-time" style="margin-top: 23rpx;">
				<view>共 1 件</view>
				<view style="margin-left: auto;color: #0277DE;font-size: 35rpx;display: flex;align-items: center;"><span
						style="color: #000000;font-size: 27rpx;margin-right: 8rpx;">待付款</span>￥56.00</view>
			</view>
			<view class="order-but">
				<view class="but-list">
					<view class="but-item">
						<u-button :plain="true" shape="circle" text="确定"></u-button>
					</view>
					<view class="but-item">
						<u-button type="primary" shape="circle" text="镂空"></u-button>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showA" @close="showA = false" bgColor="transparent" mode="center">
			<view class="pop-con">
				<view style="font-weight: 500;">温馨提示</view>
				<view class="pop-title">您确定已经上门进行服务了吗？</view>
				<view class="pop-but">
					<view class="pop-but-item" @click="showA = false">取消</view>
					<view class="pop-but-item but-active">确定</view>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [{
						id: 1,
						checked: false
					},
					{
						id: 2,
						checked: false
					},
					{
						id: 3,
						checked: false
					},
					{
						id: 4,
						checked: false
					},

				],
				tabList: [{
						name: '全部',
						type: 1
					},
					{
						name: '待付款',
						type: 2
					},
					{
						name: '待发货',
						type: 3
					},
					{
						name: '售后',
						type: 4
					}
				],
				showA: false,
				src: "https://cdn.uviewui.com/uview/album/2.jpg",

			}
		},
		onLoad(option) {

		},
		methods: {

			goDetail(item) {
				uni.navigateTo({
					url: '/pages/shop/orderDetai/orderDetai'
				})
				this.orderList.forEach((row) => {
					row.checked = false
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		// padding-top: 23rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2 + 23rpx) !important;
	}

	.order-time {
		display: flex;
		align-items: center;
		font-size: 27rpx;
		color: #999999;
	}

	.order-list {
		margin: 0 auto;
		width: 688rpx;
		padding: 23rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		// margin-bottom: 23rpx;
		margin-top: 23rpx;

		.mine-avatar {
			display: flex;
			margin-top: 23rpx;

			.avatar-text {
				flex: 1;
				margin-left: 27rpx;
				font-size: 27rpx;
				color: #999999;
				display: flex;
				flex-direction: column;
				// justify-content: space-between;
			}

			.text-ovew {
				width: 465rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

		}

		.order-pay {
			display: flex;
			justify-content: flex-end;
			font-size: 27rpx;
			color: #000000;
			margin-top: 15rpx;
		}

		.order-but {
			display: flex;
			margin-top: 23rpx;

			.but-list {
				margin-left: auto;
				display: flex;
			}

			.but-item {
				width: 154rpx;
				margin-left: 23rpx;
			}

			& ::v-deep .u-button {
				height: 65rpx !important;
			}

			& ::v-deep .u-button--info {
				color: #000000 !important;
			}
		}


	}

	.pop-con {
		width: 519rpx;
		background: #FFFFFF;
		border-radius: 19rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 31rpx;
		color: #333333;
		padding-top: 46rpx;

		.pop-title {
			font-size: 27rpx;
			color: #666666;
			margin-top: 23rpx;
			margin-bottom: 46rpx;
		}

		.pop-but {
			width: 100%;
			display: flex;
			align-items: center;

		}

		.pop-but-item {
			border-top: 1px solid #D8D8D8;
			flex: 1;
			height: 83rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 23rpx;
			color: #333333;
		}

		.but-active {
			border-top: 1px solid #0277DE;
			background-color: #0277DE;
			color: #FFFFFF;
			border-radius: 0 0 19rpx 0;
		}
	}
</style>